import React, { Component } from 'react'
import { withRouter}from 'react-router-dom'
import { Modal } from 'antd'
import storageUtils from '../../utils/storageUtils'
import memoryUtils from '../../utils/memoryUtils'
import menuList from '../../config/menuConfig'
import { formateDate } from '../../config/dateUtils'
import './index.less'
import { reqWeather } from '../../api'
import LinkButton from '../link-button/link-button'

const user = memoryUtils.user

const { confirm } = Modal;

class Header extends Component {

    state={
        // header中的时间
        currentTime:formateDate(Date.now()),
        // 天气的图片
        dayPictureUrl:'',
        // 天气现状
        weather:''
    }

    logout=()=>{
        confirm({
            title: '温馨提示',
            content: '您确定要退出登录吗？',
            okText:'确定',
            cancelText:'取消',
            onOk:()=> {
                // 清除内存中的user
                memoryUtils.user = ''
                // 清除localStorage中的user
                storageUtils.removeUser(user)
                // 跳转页面
                this.props.history.replace('/login')
            },
            onCancel() {},
          });
    }

    getTitle=()=>{
       const path = this.props.location.pathname
       let title = ''
       menuList.forEach((item)=>{
            if(item.key === path){
                title = item.title
            }else if(item.children){
                // const cItem = item.children.find(cItem => cItem.key===path)
                // 修改为只要当前路径包含cItem.key，标题就会出现内容
                const cItem = item.children.find(cItem => path.indexOf(cItem.key)===0)
                if(cItem){
                    title = cItem.title
                }
            }
       })
       return title
    }

    getWeather= async ()=> {
        // 发送请求获取数据
        const {dayPictureUrl, weather} = await reqWeather('广州')
        // 更新状态
        this.setState({
            dayPictureUrl,
            weather
        })
    }

    componentDidMount(){
        setInterval(()=>{
            this.setState({
                currentTime: formateDate(Date.now())
            })
        },1000)

        // 天气请求
        this.getWeather()
    }
    
    render() {
        const title = this.getTitle()
        return (
            <div className="header">
                <p className="header_top">欢迎，{user.username}&nbsp;&nbsp;&nbsp;
                 {/* 组件的标签体作为标签的children属性传入 */}
                <LinkButton onClick={this.logout}>退出</LinkButton></p>
                <div className="header_bottom">
                    <h3>{title}</h3>
                    <div className="header_bottom_right">
                        <span>{this.state.currentTime}</span>
                        <img src={this.state.dayPictureUrl} alt="天气"/>
                        <span>{this.state.weather}</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(Header)

/***
 * 出现的bug：
 * /product/addupdate 和 /product/detail 头部也没有显示 商品管理（在原来的基础上做修改）
 * const cItem = item.children.find(cItem => path.indexOf(cItem.key)===0)
    if (cItem) {
        title = cItem.title
    }
 * 
 * 
 */